<div id="helper-classes-width-height" class="p-24">

    <div class="mat-title">Width Helpers</div>

    <div class="mat-card mat-elevation-z4 p-24" fxLayout="column">

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <span>w-0</span>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="w-0">0px width</span>
                </textarea>
            </fuse-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption mb-16">Min:0 - Max:512, Multiples of 4</div>
                <span>w-100</span>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="w-100">100px width</span>
                </textarea>
            </fuse-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption mb-16">Min:0 - Max:100, Multiples of 5</div>
                <span>w-25-p</span>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="w-25-p">25% width</span>
                </textarea>
            </fuse-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption mb-16">Min:0 - Max:100, Multiples of 5</div>
                <span>w-100-p</span>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="w-100-p">100% width</span>
                </textarea>
            </fuse-highlight>

        </div>

    </div>

    <div class="mat-title mt-64">Height Helpers</div>

    <div class="mat-card mat-elevation-z4 p-24" fxLayout="column">

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <span>h-0</span>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="h-0">0px height</span>
                </textarea>
            </fuse-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption mb-16">Min:0 - Max:512, Multiples of 4</div>
                <span>h-100</span>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="h-100">100px height</span>
                </textarea>
            </fuse-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption mb-16">Min:0 - Max:100, Multiples of 5</div>
                <span>h-25-p</span>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="h-25-p">25% height</span>
                </textarea>
            </fuse-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption mb-16">Min:0 - Max:100, Multiples of 5</div>
                <span>h-100-p</span>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="h-100-p">100% height</span>
                </textarea>
            </fuse-highlight>

        </div>

    </div>

</div>
